<template>
  <div v-loading="loading" class="list-table">
    <div ref="scrollDiv" class="venture-fund">
      <table>
        <tr class="bg1">
          <th colspan="2" class="fixed bg1">基金业绩</th>
          <th v-for="(th, ind) in list.fund" :key="ind">No.{{ ind + 1 }} - {{ $t(th) }}</th>
        </tr>
        <tr class="bg2">
          <th colspan="2" class="fixed bg1">年份</th>
          <th v-for="(th, ind) in list.year" :key="ind">{{ th }}</th>
        </tr>
        <tr v-for="(i, n) in list.datas" :key="n">
          <td class="fixed" colspan="2">{{ $t(i.title) }}({{ $t('元') }})</td>
          <td v-for="(o, d) in i.arr" :key="d">{{ moneyFormat(o) }}</td>
        </tr>
      </table>
    </div>
    <p v-if="noMore" class="venture-fund-empty">{{ $t('没有更多了') }}</p>
    <p v-if="loadingMes" class="venture-fund-empty">{{ $t('加载中') }} <i style="margin-top: 5px;" class="el-icon-loading" /></p>
  </div>
</template>

<script>
import { findListSync } from '@/api/fund/fundPerformance/fundPerformance.js'
export default {
  components: {
  },
  data() {
    return {
      loading: false,
      total: 0,
      loadingMes: false,
      noMore: false,
      drawer: false,
      queryParams: {
        fundFullName: undefined,
        foundationYearStart: undefined,
        foundationYearEnd: undefined,
        pageNum: 1,
        pageSize: 10
      },
      list: {
        fund: [],
        year: [],
        datas: []
      }
    }
  },
  computed: {
  },
  watch: {
  },
  created() {
  },
  mounted() {
    this.list.fund = []
    this.list.year = []
    this.list.datas = []
    this.init()
    window.addEventListener('scroll', this.handleScroll, true)
  },
  methods: {
    handleScroll(e) {
      // 滚动条滚动时，距离左侧的距离
      var scrollLeft = e.target.scrollLeft
      // 可视区的高度
      var windowWidth = e.target.clientWidth
      // 滚动条区域的总宽度
      var scrollWidth = e.target.scrollWidth
      if (scrollWidth - (scrollLeft + windowWidth) < 50) {
        // !this.loadingMes  不能去掉, 否则会无限制调用后台. 前台出现重复数据
        if (!this.loadingMes) {
          if (this.list.fund.length < this.total) {
            this.load()
          } else {
            this.noMore = true
            setTimeout(() => {
              this.noMore = false
            }, 1500)
          }
        }
      }
    },
    init() {
      if (this.queryParams.pageNum === 1) {
        this.loading = true
      }
      // 加载年份及其基金名称
      findListSync(this.queryParams).then(response => {
        // console.log(response)
        if (response.rows !== null) {
          this.total = response.total
          const formData = response.rows
          formData[0].fundArr.forEach(itemFund => {
            this.list.fund.push(itemFund)
          })
          formData[1].yearArr.forEach(itemYear => {
            this.list.year.push(itemYear)
          })
          formData[2].datas.forEach(itemDatas => {
            if (this.list.datas.length < formData[2].datas.length) {
              this.list.datas.push(itemDatas)
            } else {
              this.list.datas.forEach((items) => {
                if (itemDatas.title === items.title) {
                  itemDatas.arr.forEach((items2) => {
                    items.arr.push(items2)
                  })
                }
              })
            }
          })
          this.loadingMes = false
          this.loading = false
        }
      })
    },
    load() {
      this.queryParams.pageNum += 1
      this.loadingMes = true
      this.init()
    }
  }
}
</script>
<style lang="scss" scoped>
.list-table{
  height: 100%;
  overflow: hidden;
  position: relative;
  .venture-fund{
    overflow: auto;
    max-height: 100%;
  }
  .venture-fund-empty{
      position: absolute;
      right: 0;
      margin: 0;
      width: 32px;
      text-align: center;
      padding: 10px;
      background: #fff;
      top: 50%;
      margin-top: -45px;
      border-radius: 10px 0 0 10px;
      box-shadow: 0 0 13px 0px #ddd;
    }
}

</style>
